<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>w0929_2_event</title>
      <script>
         window.onload=function(){
            //버튼클릭하면 함수호출실행
            //id가 "btn01"인 요소.클릭=f1()
            var btn = document.getElementById("btn01");
            btn.onclick=function() {
               alert(this);
               //this.. [object HTMLButtonElement]
               //이벤트가 발생한 객체
               
               //이벤트가 발생한 객체에 js의 style객체의 속성을 변경..서식변경
               this.style.color="blue";
               this.style.backgroundColor="#ccddee";
               
               //이벤트가 발생한 객체의 자식노드인 textNode의 값을 '변경후'로 수정
               this.firstChild.nodeValue="변경후";
               
               //이벤트제거
               btn.onclick=null;
            };
         };   //end of window.onload
      </script>
   </head>
   <body>
      <button id="btn01">f1()호출</button>
   </body>
</html>